<template>
    <div class="cadView">
        <el-dialog :title="$t('message.cadViewer.inputTextDialogText')" :visible.sync="showTextInputDialog"
            :modal-append-to-body="false" width="448px">
            <el-form>
                <el-form-item label>
                    <el-input type="textarea" :rows="2" v-model="textInputDialogContent" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" @before-close="onTextInputDialogOkClick(false)">
                <el-button @click="onTextInputDialogOkClick(false)" size="small">{{ $t("message.public.cancel")
                    }}</el-button>
                <el-button type="primary" size="small" @click="onTextInputDialogOkClick(true)">{{
                    $t("message.public.confirm") }}</el-button>
            </div>
        </el-dialog>

        <!-- 关闭markup対话框 -->
        <el-dialog :visible.sync="showExitMarkupDialog" :modal-append-to-body="false" width="448px" top="40vh"
            :title="$t('message.cadViewer.taggingMode.exitMarkup')" class="el-message-box__title">
            <div style="display: flex;align-items: center;">
                <div class="el-message-box__status el-icon-warning" style="margin-top: -4px;"></div>
                <div style="margin-left: 35px;height: 24px;line-height: 24px;">
                    変更内容を保存します、宜しいですか？
                </div>
            </div>
            <!-- <div>{{ dialogExitFileName }}</div> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="onMarkupModeExit(0)" size="small" class="">
                    {{ $t("message.public.markupconfirm") }}
                </el-button>
                <el-button @click="onMarkupModeExit(1)" size="small" class="">
                    {{ $t("message.public.markupout") }}
                </el-button>
                <el-button @click="onMarkupModeExit(2)" size="small" class="">
                    {{ $t("message.public.markupcancel") }}
                </el-button>
            </span>
        </el-dialog>

        <!-- 关闭ball球标対话框--已改样式，原有变量交织未削除 -->
        <!-- <el-dialog
            :visible.sync="showExitBallDialog"
            :modal-append-to-body="false"
            width="448px"
            :title="$t('message.cadViewer.ballType.exitBall')"
        >
            <div>
                {{ $t("message.cadViewer.taggingMode.changeMarkupTip") }}
            </div>
            <div>{{ dialogExitFileName }} ？？？</div>
            <span slot="footer" class="dialog-footer">
                <button
                    @click="onBallModeExit(0)"
                    size="small"
                    class="markupbtn"
                >
                    {{ $t("message.public.markupconfirm") }}
                </button>
                <button
                    @click="onBallModeExit(1)"
                    size="small"
                    class="markupbtn"
                >
                    {{ $t("message.public.markupout") }}
                </button>
                <button
                    @click="onBallModeExit(2)"
                    size="small"
                    class="markupbtn"
                >
                    {{ $t("message.public.markupcancel") }}
                </button>
            </span>
        </el-dialog> -->

        <div class="toolbar">
            <div class="t-content">
                <HeadForCad style="width: 100%" :selectRadio="optTypeRadio" @change="onOptTypeRadioChange"
                    :disabled="isMarkupEnable" :show3DBtn="showHead3dBtn" :is3dAble="isHead3dAble"
                    @on3dClick="isShow3dView = !isShow3dView" />
                <!-- <div class="l-content">
                    <img
                        src="@/assets/img/jgc.png"
                        v-if="lang == '0' || lang == '1'"
                    />
                    <img src="@/assets/img/jgc_en.png" v-else />
                    <span>A-MIS Ver.7 for Web</span>
                </div>

                <div class="r-content">
                    <el-radio-group
                        v-model="optTypeRadio"
                        @change="onOptTypeRadioChange"
                        class="radio-lay"
                        size="mini"
                        :disabled="isMarkupEnable"
                    >
                        <el-radio :label="0">{{
                            $t("message.cadViewer.optTypeStr.commonSign")
                        }}</el-radio>
                        <el-radio :label="1">{{
                            $t("message.cadViewer.optTypeStr.ballSign")
                        }}</el-radio> 
                        <el-radio :label="2">{{
                            $t("message.cadViewer.optTypeStr.visualBallSign")
                        }}</el-radio>
                    </el-radio-group>

                    <div class="nowTime">{{ nowTime }}</div>
                    <i
                        class="el-icon-full-screen"
                        @click="handleFullScreen"
                    ></i>
                </div> -->
            </div>
            <selectShapeParams ref="paramslayout" class="params-layout" :isAble="isMarkupEnable"
                @handleSelectChange="onParamsSelectChange" @handlePrintClick="printSVGViewer"
                @handleResetViewClick="resetSVGViewer" @handleDownLoadClick="downLoadFile"
                :selectedShapeParam="selectedParams" :isMarkupEnable="isMarkupEnable" @onMenuClick="removeActiveClass"
                :activeLayerIndex="layerActiveIndex" :layersData="layerDatas" @onActiveLayerSelect="onActiveLayerSelect"
                :optType="optTypeRadio" :id="$route.query.id"/>
        </div>
        <div class="content-view">
            <!-- 左侧菜单 -->
            <addShapesLayout ref="shapeslayout" class="shapes-layout" :leftToolFalg="!isMarkupEnable"
                :isAble="isMarkupEnable" @handleSelectChange="onShapeSelectChange" :optType="optTypeRadio" />


            <!-- cad图纸 -->
            <div id="right-CAD" class="right-CAD" :style="optTypeRadio == 2 || optTypeRadio == 1 || optTypeRadio == 3
                ? 'width: calc(100% - 48px  - 25vw)'
                : 'width: calc(100% - 48px)'
                "></div>
            <!-- 底栏内容 -->
            <div class="bottom-content">
                <div class="l">
                    <span>Ready</span>
                    <div>
                        <span>{{
                            markupFileData != null
                                ? markupFileData.markUpFileName +
                                "." +
                                markupFileData.ext
                                : ""
                        }}</span>
                        <span>{{
                            getDefaultLayerData() != null
                                ? getDefaultLayerData().sName
                                : ""
                        }}</span>
                    </div>
                </div>
                <div class="X">
                    <span>X: {{ mousePosX.toFixed(3) }}</span>
                </div>
                <div class="Y">
                    <span>Y: {{ mousePosY.toFixed(3) }}</span>
                </div>
                <div class="file-Date" @click="onExportClick">
                    <span style="marginleft: 16px">File Date:</span>
                    <span>{{ fileDate }}</span>
                </div>
            </div>

            <transition name="slide-fade" v-on:after-enter="afterRelationViewEnter"
                v-on:after-leave="afterRelationViewLeave">
                <div class="ballrelative-lay" align="right"
                    v-if="isSvgLoaded && (optTypeRadio == 2 || optTypeRadio == 1 || optTypeRadio == 3)" :style="isShow3dView
                        ? 'overflow: visible;'
                        : 'overflow: hidden;'
                        ">
                    <ballRelationView ref="ballRelationView" class="table-lay"
                        v-if="isSvgLoaded && (optTypeRadio == 2 || optTypeRadio == 1 || optTypeRadio == 3)"
                        :selectType="optTypeRadio" :macNumb="optMacNumb" :macCode="optMacCode"
                        :isEditMde="isMarkupEnable" @updateBallMarkups="updateBallMarkups"
                        @onTableItemSelect="onTableItemSelect" @showExitMarkupDialogFn="showExitMarkupDialog = false, isMarkupEnable = false,
                            onShapeSelectChange({ selectedShapeId: 0 }),
                            showExitBallDialog = false
                            " :optPltCode="optPltCode" />

                    <ballRelation3dView v-if="isShow3dView" ref="ballRelation3dView" class="scene-lay"
                        :selectType="optTypeRadio" :macNumb="optMacNumb" :macCode="optMacCode"
                        :isEditMde="isMarkupEnable" :style="isShow3dView ? 'z-index: 6;' : 'z-index: 0;'"
                        @on3dBallMarkerClick="on3dBallMarkerClick" />
                </div>
            </transition>
        </div>

        <!-- 进入标记模式 -->
        <taggingMode ref="taggingMode" v-if="showEnterMarkupDialog" @onNewFileClick="onSelectedMarkupFileCreate"
            @onOkClick="onSelectedMarkupFileOk" @onCancelClick="onSelectedMarkupFileCancel" :inFileID="getMarkUpFileId">
        </taggingMode>

        <!-- 另存为弹窗 -->
        <saveAsFile v-if="showCreateNewFileDialog" :showMode="showCreateNewFileType" :markupFileData="markupFileData"
            :markupFileBaseData="markupFileBaseData" :fileId="$route.query.id" :fileNameWithoutExt="fileNameWithoutExt"
            @onOkClick="onCreateNewFileOk" @onCancelClick="onCreateNewFileCancel"></saveAsFile>

        <!-- markup 图层 -->
        <markUpLayer v-if="showLayerDialog" @onOkClick="onLayerDialogOkClick" @onCancelClick="onLayerDialogCancelClick"
            :activeLayerIndex="layerActiveIndex" :layersData="layerDatas"></markUpLayer>
    </div>
</template>

<script>
import selectShapeParams from "@/components/CadView/selectShapeParams";
import addShapesLayout from "@/components/CadView/addShapesLayout";

import * as d3 from "@/utils/d3.v5.js";
import * as svg_opt from "@/utils/svg_opt.js";
import * as const_data from "@/utils/const.js";

import { getFile } from "@/api/api";
import { Loading } from "element-ui";
import {
    editMarkUpFileContent,
    createMarkUpFileByContent,
    checkMarkUpFile,
    GetMarkUpSvg
} from "../api/api";

//弹框
import saveAsFile from "@/components/CadView/saveAsFileDialog";
import taggingMode from "@/components/CadView/taggingMode";
import markUpLayer from "@/components/CadView/markUpLayer";
import ballRelationView from "@/components/CadView/ballRelationView";
import ballRelation3dView from "@/components/CadView/ballRelation3dView";

import { setLocalStorage, getLocalStorage } from "../utils/storage";

import test_linegroup from "../utils/testdata/test_linegroup";
import HeadForCad from "@/components/header/HeadForCad";

import $ from "jquery";

import Tiff from 'tiff.js'
// 导出模块
export default {
    // 模块名字
    name: "CadView",
    // 模块数据
    data() {
        //数据
        return {
            getMarkUpFileId: '',
            svgSourceUrl: "",
            optPltCode: 9,
            t_l_menu: [
                //
                {
                    title: this.$t("message.cadViewer.tl_menu.file"),
                    dropdownList: [
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_file.open"
                            ),
                            type: "open",
                            divided: false,
                            disabled: true,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_file.save"
                            ),
                            type: "save",
                            divided: false,
                            disabled: true,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_file.save_as"
                            ),
                            type: "save_as",
                            divided: false,
                            disabled: true,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_file.sign_file"
                            ),
                            type: "sign_file",
                            divided: true,
                            disabled: true,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_file.printing"
                            ),
                            type: "printing",
                            divided: true,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_file.print_preview"
                            ),
                            type: "print_preview",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_file.print_set"
                            ),
                            type: "print_set",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_file.enter_tag_mode"
                            ),
                            type: "enter_tag_mode",
                            divided: true,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_file.over_tag_mode"
                            ),
                            type: "over_tag_mode",
                            divided: false,
                            disabled: true,
                        },
                    ],
                    disabled: false,
                    type: "file",
                },
                {
                    title: this.$t("message.cadViewer.tl_menu.section"),
                    dropdownList: [
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.select_mode"
                            ),
                            type: "select_mode",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.arc"
                            ),
                            type: "arc",
                            divided: true,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.box"
                            ),
                            type: "box",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.circle"
                            ),
                            type: "circle",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.cloud"
                            ),
                            type: "cloud",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.filled_box"
                            ),
                            type: "filled_box",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.freestyle"
                            ),
                            type: "freestyle",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.H"
                            ),
                            type: "H",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.leader"
                            ),
                            type: "leader",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.line"
                            ),
                            type: "line",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.polyline"
                            ),
                            type: "polyline",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.Y"
                            ),
                            type: "Y",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_section.text"
                            ),
                            type: "text",
                            divided: true,
                            disabled: false,
                        },
                    ],
                    disabled: true,
                    type: "section",
                },
                {
                    title: this.$t("message.cadViewer.tl_menu.modify"),
                    dropdownList: [
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_modify._delete"
                            ),
                            type: "_delete",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_modify.line"
                            ),
                            type: "line",
                            dropdownList: [
                                {
                                    title: "- - - - - - - - - - - - - - - - - - - - - - - - - - - -",
                                    type: "line1",
                                    disabled: false,
                                },
                                {
                                    title: "- - - -     - - - -     - - - -     - - - -     - - - -",
                                    type: "line2",
                                    disabled: false,
                                },
                                {
                                    title: "-   -   -   -   -   -   -   -   -   -   -   -   -   - ",
                                    type: "line3",
                                    disabled: false,
                                },
                                {
                                    title: "- - - -     -    - - - -    -- - - -     -    - - - -",
                                    type: "line4",
                                    disabled: false,
                                },
                                {
                                    title: "- - - -     -  -    - - - -    -  -    - - - -    -  -",
                                    type: "line5",
                                    disabled: false,
                                },
                            ],
                            divided: true,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_modify.line_width"
                            ),
                            type: "",
                            dropdownList: [
                                {
                                    title: "1 Pixel",
                                    type: "Pixel1",
                                    disabled: false,
                                },
                                {
                                    title: "2 Pixel",
                                    type: "Pixel2",
                                    disabled: false,
                                },
                                {
                                    title: "3 Pixel",
                                    type: "Pixel3",
                                    disabled: false,
                                },
                                {
                                    title: "4 Pixel",
                                    type: "Pixel4",
                                    disabled: false,
                                },
                                {
                                    title: "5 Pixel",
                                    type: "Pixel5",
                                    disabled: false,
                                },
                            ],
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_modify.color"
                            ),
                            type: "color",
                            dropdownList: [
                                {
                                    title: this.$t(
                                        "message.cadViewer.tl_menu_fill.none_fill"
                                    ),
                                    type: "none_fill",
                                    disabled: false,
                                },
                                {
                                    title: this.$t(
                                        "message.cadViewer.tl_menu_fill.opaque"
                                    ),
                                    type: "opaque",
                                    disabled: false,
                                },
                                {
                                    title: this.$t(
                                        "message.cadViewer.tl_menu_fill.transparent"
                                    ),
                                    type: "transparent",
                                    disabled: false,
                                },
                            ],
                            divided: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_modify.fill_type"
                            ),
                            type: "fill_type",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_modify.fill_color"
                            ),
                            type: "fill_color",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_modify.font"
                            ),
                            type: "font",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_modify.markup_img"
                            ),
                            type: "markup_img",
                            divided: true,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_modify.markup_hide"
                            ),
                            type: "markup_hide",
                            divided: true,
                            disabled: false,
                        },
                    ],
                    disabled: true,
                    type: "modify",
                },
                {
                    title: this.$t("message.cadViewer.tl_menu.view"),
                    dropdownList: [
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_view.enlarge"
                            ),
                            type: "enlarge",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_view.narrow"
                            ),
                            type: "narrow",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: this.$t(
                                "message.cadViewer.tl_menu_view.self_adaption"
                            ),
                            type: "self_adaption",
                            divided: false,
                            disabled: false,
                        },
                    ],
                    disabled: false,
                    type: "view",
                },
                {
                    title: this.$t("message.cadViewer.tl_menu.tool"),
                    dropdownList: [],
                    disabled: false,
                    type: "tool",
                },
                {
                    title: this.$t("message.cadViewer.tl_menu.help"),
                    dropdownList: [],
                    disabled: false,
                    type: "help",
                },
                {
                    title: this.$t("message.cadViewer.tl_menu.language"),
                    dropdownList: [
                        {
                            title: "中文",
                            type: "zh",
                            divided: false,
                            disabled: false,
                        },
                        {
                            title: "日本語",
                            type: "jp",
                            divided: false,
                            disabled: false,
                        },
                    ],
                    disabled: false,
                    type: "language",
                },
            ],
            leftToolFalg: true,
            activeClass: null,

            mousePosX: 0,
            mousePosY: 0,

            selectedBold: false,
            selectedItalics: false,
            selectedUnderline: false,

            selectedShapeId: 0,
            selectedParams: {},
            showTextInputDialog: false,
            showEnterMarkupDialog: false,
            showExitMarkupDialog: false,
            // 退出球标模式
            showExitBallDialog: false,
            showExitMarkupType: 0, // 0 open other 1 save close
            dialogExitFileName: "fdasfdafds",

            showCreateNewFileDialog: false,
            showCreateNewFileType: 0, // 0 create  1 査看  2 saveas

            textInputDialogContent: "textInputDialogContent",

            dialogFormVisible: false,
            fileName: null,
            fileNameWithoutExt: null,

            fileDate: null,
            fileUrl: null,

            fullscreenLoading: true,
            pageLoading: null,

            // 组件是否可用
            isMarkupEnable: false,

            //菜单点击标记
            markupFileData: null,
            markupFileBaseData: {},

            // layer··
            showLayerDialog: false,
            layerActiveIndex: -1,
            layerDatas: [],

            drawableData: {},

            lang: getLocalStorage("lang"),

            optTypeRadio: -1,
            optMacNumb: null,
            optMacCode: null,

            // 3d marker edit
            is3dMarkerVisible: true,
            showHead3dBtn: true, // 头部3dbtn是否显示
            isShow3dView: false, // 显示右侧3d窗口

            isSvgLoaded: false
        };
    },
    // 注册组件
    components: {
        selectShapeParams,
        addShapesLayout,
        saveAsFile,
        taggingMode,
        markUpLayer,

        ballRelationView,
        ballRelation3dView,

        HeadForCad,
    },
    // 监听指定值，只有指定值变化，才会触发
    watch: {

        optTypeRadio(val) {
            console.log('optTypeRadio', val);
            this.GetMarkUpSvgApi();
        },

        selectedParams(val) {
            console.log('selectedParams', val);
            // 当线色和填充色同为红色十六进制时改为，rgba格式
            if (val.selectedFillColor == "#FF0000" && val.selectedLineColor == "#FF0000") {
                val.selectedFillColor = "#FC0000";
                val.selectedLineColor = "#FC0000";
            }
            if (!val.selectedLineColor) {
                val.selectedLineColor = "#000000"
            }
            svg_opt.setGParams(val);
            let temp = svg_opt.getSelectMarkupData();
            if (this.$refs.ballRelationView)
                this.$refs.ballRelationView.setOnAddMarkupData(
                    temp
                );

            if (this.$refs.ballRelation3dView)
                this.$refs.ballRelation3dView.setSelect2dMarkerupData(temp);
        },

        isMarkupEnable(val) {
            if (val) {
                this.t_l_menu[0].dropdownList.forEach((Item) => {
                    Item.disabled = false;
                    if (Item.type == "enter_tag_mode") {
                        Item.disabled = true;
                    }
                });
                this.t_l_menu[1].disabled = false;
                this.t_l_menu[2].disabled = false;
                this.leftToolFalg = false;
            } else {
                this.leftToolFalg = true;
                this.t_l_menu[0].dropdownList.forEach((Item) => {
                    Item.disabled = true;
                    if (Item.type == "printing") {
                        Item.disabled = false;
                    }
                    if (Item.type == "print_preview") {
                        Item.disabled = false;
                    }
                    if (Item.type == "print_set") {
                        Item.disabled = false;
                    }
                    if (Item.type == "enter_tag_mode") {
                        Item.disabled = false;
                    }
                });
                this.t_l_menu[1].disabled = true;
                this.t_l_menu[2].disabled = true;
            }
            svg_opt.setCanEditSelectMarkup(val);
            svg_opt.setIsMarkupStatus(val);
        },

        showLayerDialog() {
            this.updateLayersInfo();
        },

        showEnterMarkupDialog() {
            this.updateLayersInfo();
        },

        showExitMarkupDialog() {

            //      <el-dialog :visible.sync="showExitMarkupDialog" :modal-append-to-body="false" width="448px"
            //     :title="$t('message.cadViewer.taggingMode.exitMarkup')">
            //     <div>
            //         {{
            //             showExitMarkupType == 1
            //                 ? $t("message.cadViewer.taggingMode.exitMarkupMode")
            //                 : $t("message.cadViewer.taggingMode.changeMarkupTip")
            //         }}
            //     </div>
            //     <div>{{ dialogExitFileName }}</div>
            //     <span slot="footer" class="dialog-footer">
            //         <button @click="onMarkupModeExit(0)" size="small" class="markupbtn">
            //             {{ $t("message.public.markupconfirm") }} 保存
            //         </button>
            //         <button @click="onMarkupModeExit(1)" size="small" class="markupbtn">
            //             {{ $t("message.public.markupout") }} 
            //         </button>
            //         <button @click="onMarkupModeExit(2)" size="small" class="markupbtn">
            //             {{ $t("message.public.markupcancel") }}
            //         </button>
            //     </span>
            // </el-dialog>

            console.log(111);
            this.updateLayersInfo();
            // this.$confirm('変更内容を保存します、宜しいですか？', this.$t('message.cadViewer.taggingMode.exitMarkup'), {
            //     cancelButtonText: 'Cancel',
            //     confirmButtonText: 'OK',

            //     type: 'warning'
            // }).then(() => {
            //     console.log(1111)

            //     this.onBallModeExit(0);
            // }).catch(() => {
            //     console.log(2222)

            //     this.onBallModeExit(1);
            // });

        },
    },

    computed: {
        isHead3dAble() {
            if (this.isMarkupEnable) return false;

            if (this.optTypeRadio == 1 || this.optTypeRadio == 2 || this.optTypeRadio == 3) return true;

            return false;
        },
    },

    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
        /**
         * 加载markup xml
         */
        loadMarkupFile(filePath) {
            if (filePath == null) filePath = "/markup_layers.xml";
            let res = svg_opt.loadMarkupsFromFile(filePath);
            if (!res) {
                this.$alert(this.$t("message.cadViewer.loadMarkupFileError"), '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });
            }
        },

        updateMarkupFileBaseData(baseInfo) {
            this.markupFileBaseData = baseInfo;
        },

        /**
         * 图形参数改变回调
         */
        onParamsSelectChange(e) {
            console.log(e);
            // return;
            this.selectedParams = e;
        },

        /**
         * 图形选择回调
         */
        onShapeSelectChange(e) {
            console.log(e);
            //      return;
            this.selectedShapeId = e.selectedShapeId; // 图形id
            if (e.selectedShapeId == 0) {
                svg_opt.changeGlobalState(0, -1);
                svg_opt.SetSvgMouseMode(0);
            } else {
                svg_opt.SetSvgMouseMode(2);
                svg_opt.changeGlobalState(3, this.selectedShapeId); // add状态
            }
        },

        // 2d图纸选中marker
        updateParamOnSelected(e) {
            this.selectedParams = e;
            if (this.$refs.ballRelationView)
                this.$refs.ballRelationView.toSelectTableItem(e.posOrder);

            if (this.$refs.ballRelation3dView)
                this.$refs.ballRelation3dView.toSelect3dBallMarkerByStr(e.posOrder);
        },

        onTextInputDialogOkClick(e) {
            console.log(e, this.textInputDialogContent);
            this.showTextInputDialog = false;
            var _selectedParams = this.$refs.paramslayout.getParamsSelect();
            if (e) _selectedParams.text = this.textInputDialogContent.replace(/\s/g, "") == '' ? ' ' : this.textInputDialogContent;
            this.selectedParams = _selectedParams;
        },

        toShowTextInputDialog(e) {
            this.showTextInputDialog = true;
            this.textInputDialogContent = e;
        },

        /**
         * 获取选择的图形参数
         */
        getParamsSelect() {
            var _selectedParams = this.$refs.paramslayout.getParamsSelect();
            this.selectedParams = _selectedParams;
        },

        onSvgMousePosChange(posX, posY) {
            this.mousePosX = posX;
            this.mousePosY = posY;
        },

        printSVGViewer() {
            // this.$nextTick(function(){
            //   this.$print(this.$refs.right_CAD, {});
            // })
            var userAgent = navigator.userAgent.toLowerCase(); //取得浏览器的userAgent字符串
            if (userAgent.indexOf("trident") > -1) {
                this.$alert("请使用google浏览器", {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });
                return false;
            } else if (userAgent.indexOf("msie") > -1) {
                var onlyChoseAlert = simpleAlert({
                    content: "请使用Google或者360浏览器打印",
                    buttons: {
                        确定: function () {
                            onlyChoseAlert.close();
                        },
                    },
                });
                this.$alert("请使用google", {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });
                return false;
            } else {
                var headstr = "<html><head><title></title></head><body>";
                var footstr = "</body></html>";
                var printData = document.getElementById("right-CAD").innerHTML; //获得 div 里的所有 html 数据
                var wind = window.open(
                    "",
                    "newwin",
                    "toolbar=no,scrollbars=yes,menubar=no"
                );
                wind.document.body.innerHTML = headstr + printData + footstr;
                wind.print(printData);
                // printArea
            }
        },
        resetSVGViewer() {
            svg_opt.ResetSvgView();
        },

        onBackToHome() {
            this.$router.push("/HomePageView");
        },

        downLoadFile() {
            if (this.fileUrl) window.location.href = this.fileUrl;
        },

        async onSvgLoaded() {
            console.log("CadView onSvgLoaded ");
            this.showPageLoading(false);
            let EXT = this.drawableData.ext
            console.log('this.drawableData', this.drawableData);
            if (
                EXT == "png" ||
                EXT == "jpg" ||
                EXT == "gif" ||
                EXT == "bmp" ||
                EXT == "jpeg" ||
                EXT == "tif" ||
                EXT == "tiff"
            ) {
                svg_opt.changeSvgElementData({
                    tagName: "img-content",
                    paramName: "xlink:href",
                    newValue: this.drawableData.sourcePath,
                });
            } else if (EXT == "tif" || EXT == "tiff") {
                // let token = getLocalStorage('token')
                // const response = await fetch(this.drawableData.path, {
                //     method: 'POST', // 或者 'PUT'  
                //     headers: {
                //         'Content-Type': 'application/json',
                //         // 如果服务器需要其他的头部信息，可以在这里添加  
                //         // 设置其他请求头，如 'Content-Type': 'application/json'（対于POST请求）  
                //         'Authorization': `Bearer ${token}`, // 如果需要的话  
                //         // 注意：Fetch API不会自动处理cookies，你需要手动处理  
                //         // 但浏览器通常会在同源请求中自动发送cookies  
                //         // 如果你需要在跨域请求中发送cookies，你需要在服务器端设置CORS策略来允许credentials  
                //         'Credentials': 'include' // 注意：这不是一个有效的Fetch API header，而是CORS策略的一部分    
                //     }
                // })
                // const buffer = await response.arrayBuffer()

                // const tiff = new Tiff({ buffer: buffer })

                // let dataUrl = tiff.toDataURL()
                // console.log('dataUrl', dataUrl);
                svg_opt.changeSvgElementData({
                    tagName: "img-content",
                    paramName: "xlink:href",
                    // newValue: dataUrl,
                    newValue: this.drawableData.sourcePath,
                });
            }

            let tempMarkupFileData = this.$route.query.markupFileData;
            if (tempMarkupFileData && tempMarkupFileData.length > 2) {
                console.log(tempMarkupFileData);
                this.onSelectedMarkupFileOk(JSON.parse(tempMarkupFileData));
            }

            if (this.$refs.ballRelationView) {
                this.$refs.ballRelationView.initTableAndMarkups();
            }

            this.isSvgLoaded = true;
        },

        showPageLoading(val) {
            if (val) {
                this.pageLoading = this.$loading({
                    // 声明一个loading対象
                    lock: true, // 是否锁屏
                    fullscreen: true,
                    // text: "正在加载...", // 加载动画的文字
                    // spinner: "el-icon-loading", // 引入的loading图标
                    background: "rgba(255, 255, 255, 0.3)", // 背景颜色
                    customClass: "loading-mask",
                });
            } else {
                if (this.pageLoading) this.pageLoading.close();
            }
        },

        onExportClick() {
            svg_opt.genMarkupsContent(null);
            // this.loadMarkupFile("/markup_layers.xml");
        },
        // 顶部下拉菜单点击事件
        activeMenuClick(element, index) {
            this.activeClass = index;
        },
        //下拉菜单点击事件 判断name值即可
        removeActiveClass(name) {
            this.activeClass = null;
            // 进入标记模式
            if (name == "enter_tag_mode") {
                if (this.optTypeRadio == 0) this.showEnterMarkupDialog = true;
                else if (this.optTypeRadio == 1 || this.optTypeRadio == 2 || this.optTypeRadio == 3) {
                    if (this.$refs.ballRelationView) {
                        if (this.$refs.ballRelationView.getTableListCount() > 0)
                            this.isMarkupEnable = true;
                        else {
                            this.$alert(this.$t(
                                "message.cadViewer.ballRelativeNoPoint"
                            ), '', {
                                confirmButtonText: 'OK',
                                type: 'warning',
                            });

                        }
                    }
                }
            }
            // 退出标记模式
            if (name == "over_tag_mode") {
                if (this.optTypeRadio == 0) {
                    this.showExitMarkupType = 1;
                    this.dialogExitFileName = "";
                    this.showExitMarkupDialog = true;
                } else if (this.optTypeRadio == 1 || this.optTypeRadio == 2 || this.optTypeRadio == 3) {
                    this.showExitBallDialog = true;
                    this.showExitMarkupDialog = true;
                    // this.$confirm('変更内容を保存します、宜しいですか？', this.$t('message.cadViewer.taggingMode.exitMarkup'), {
                    //     cancelButtonText: 'Cancel',
                    //     confirmButtonText: 'OK',

                    //     type: 'warning'
                    // }).then(() => {
                    //     console.log(1111)

                    //     this.onBallModeExit(0);
                    // }).catch(() => {
                    //     console.log(2222)

                    //     this.onBallModeExit(1);
                    // });

                }
            }

            // open
            if (name == "open") {
                this.showExitMarkupType = 0;
                this.dialogExitFileName =
                    this.markupFileData.markUpFileName + ".xml";
                this.showExitMarkupDialog = true;
            }

            // save
            if (name == "save") {
                let strContent = svg_opt.genMarkupsContent(
                    this.markupFileBaseData
                );
                console.log(strContent);
                this.saveChangesOnMarkupFile(
                    this.markupFileData.id,
                    strContent
                );
            }

            // save_as
            if (name == "save_as") {
                this.showCreateNewFileDialog = true;
                this.showCreateNewFileType = 2;
            }

            // sign_file
            if (name == "sign_file") {
                this.showCreateNewFileDialog = true;
                this.showCreateNewFileType = 1;
            }

            if (name == "show_markups") {
                svg_opt.showAllMarkups(true);
            }
            if (name == "hide_markups") {
                svg_opt.showAllMarkups(false);
            }

            if (name == "print_set") {
                this.$refs.shapeslayout.resetToSelectMode();
                this.printSVGViewer();
            }

            if (name == "zh") {
                this.langChange("1");
            }

            if (name == "jp") {
                this.langChange("0");
            }

            if (name == "en") {
                this.langChange("2");
            }

            if (name == "layer") {
                // this.updateLayersInfo();
                // svg_opt.changeGlobalState(0 , -1);
                this.$refs.shapeslayout.resetToSelectMode();
                this.showLayerDialog = true;
            }
        },

        updateLayersInfo() {
            this.layerActiveIndex = JSON.parse(
                JSON.stringify(svg_opt.getActiveLayerIndex())
            );
            this.layerDatas = JSON.parse(
                JSON.stringify(svg_opt.getLayersData())
            );
        },

        onSelectedMarkupFileOk(e) {
            this.markupFileData = e;

            if (e == null || e.path == null)
                this.loadMarkupFile("/markup_layers.xml");
            else this.loadMarkupFile(e.path);
            this.isMarkupEnable = true;

            let tempdata = svg_opt.getDefaultLayerData();
            this.$refs.paramslayout.changeColors(tempdata.nColor);

            this.showEnterMarkupDialog = false;
        },

        onSelectedMarkupFileCancel() {
            this.showEnterMarkupDialog = false;
            if (this.showExitMarkupType == 1) this.isMarkupEnable = false;
        },

        onSelectedMarkupFileCreate() {
            this.showCreateNewFileType = 0;
            this.showCreateNewFileDialog = true;
        },

        onCreateNewFileOk(e) {
            // this.showCreateNewFileDialog = false;
            // this.markupFileBaseData = e;
            if (!e) {
                this.showCreateNewFileDialog = false;
                return;
            }

            let contentStr = svg_opt.genMarkupsContent(e);

            this.createMarkupFileByContentStr(
                this.$route.query.id,
                e,
                contentStr,
                "xml"
            );
        },

        onCreateNewFileCancel() {
            this.showCreateNewFileDialog = false;
        },

        /**
         * 0 save 1 no save 2 cancel
         */
        onMarkupModeExit(e) {
            if (this.optTypeRadio == 0) {
                if (e == 0) {
                    let strContent = svg_opt.genMarkupsContent(
                        this.markupFileBaseData
                    );
                    this.saveChangesOnMarkupFile(
                        this.markupFileData.id,
                        strContent
                    );
                } else if (e == 1) {
                    this.exitMarkupMode();
                } else if (e == 2) {
                    this.showExitMarkupDialog = false;
                    if (this.showExitMarkupType == 0) {
                        // this.showEnterMarkupDialog = true;
                    }
                }
            } else {
                if (this.$refs.ballRelationView)
                    this.$refs.ballRelationView.exitBallMode(e);
            }


        },

        /**
         * 退出球标模式
         */
        onBallModeExit(e) {
            if (e == 0) {
                // let strContent = svg_opt.genMarkupsContent(
                //     this.markupFileBaseData
                // );
                // console.log(strContent);
                this.exitBallMode(e);
            } else if (e == 1) {
                this.exitBallMode(e);
            } else if (e == 2) {
                this.showExitBallDialog = false;
            }
        },

        /**
         * inMode 0 保存退出  1 不保存退出
         */
        exitBallMode(inMode) {
            if (this.showExitBallDialog) {
                this.isMarkupEnable = false;
                this.onShapeSelectChange({ selectedShapeId: 0 });
                this.showExitBallDialog = false;

                if (this.$refs.ballRelationView)
                    this.$refs.ballRelationView.exitBallMode(inMode);
            }
        },

        exitMarkupMode() {
            if (this.showExitMarkupDialog) {
                if (this.showExitMarkupType == 0) {
                    // open other
                    this.showEnterMarkupDialog = true;
                } else {
                    // 关闭markup模式
                    this.isMarkupEnable = false;
                    this.onShapeSelectChange({ selectedShapeId: 0 });
                    svg_opt.clearAllMarkups();
                    this.markupFileData = null;
                    this.markupFileBaseData = null;
                }
                this.showExitMarkupDialog = false;
            }
        },

        saveChangesOnMarkupFile(xmlId, contentStr) {
            if (xmlId == null || contentStr == null) {
                return;
            }

            let dataJson = {
                markUpFileID: xmlId,
                content: contentStr,
            };
            this.showPageLoading(true);
            var _self = this;
            editMarkUpFileContent(dataJson).then((res) => {
                console.log(res);
                this.showPageLoading(false);
                if (!res || res.data.code != 0) {
                    this.$alert(res.data.msg, '', {
                        confirmButtonText: 'OK',
                        type: 'warning',
                    });
                    return;
                }

                this.$message({
                    message: res.data.msg,
                    type: "success",
                });

                this.exitMarkupMode();
            });

            this.postGlobalMessage({
                name: "CadView",
                func: "saveChangesOnMarkupFile",
                data: {
                    xmlId: xmlId,
                    id: this.$route.query.id,
                },
            });
        },

        createMarkupFileByContentStr(fileId, params, contentStr, ext) {
            if (
                fileId == null ||
                contentStr == null ||
                ext == null ||
                params == null
            ) {
                this.$alert(this.$t("message.cadViewer.createParamErrorTip"), '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });
                return;
            }

            let dataJson = {
                fileID: fileId,
                content: contentStr,
                fileName: params.value,
                ext: ext,
                creator: getLocalStorage("userID"),
                cover: params.force ? 1 : 2,
                pltCode: Number(this.$route.query.pltCode),
            };

            this.showPageLoading(true);
            createMarkUpFileByContent(dataJson).then((res) => {
                console.log(res, 'LLLLLLLLLLLLLLL');
                this.showPageLoading(false);
                if (!res || res.data.code != 0) {
                    this.$alert(this.$t("message.cadViewer.createErrorTip"), '', {
                        confirmButtonText: 'OK',
                        type: 'warning',
                    });
                    return;
                }

                this.$message({
                    message: this.$t("message.cadViewer.createOkTip"),
                    type: "success",
                });
                // showCreateNewFileDialog: false,
                // showCreateNewFileType: 0, // 0 create  1 査看  2 saveas  3 select_create
                if (this.showCreateNewFileDialog) {
                    if (this.showCreateNewFileType == 0) {
                        console.log("select_create");
                        this.$refs.taggingMode.getDataList();
                    } else {
                        this.markupFileData = res.data.data;
                        this.loadMarkupFile(this.markupFileData.filePath);
                        this.isMarkupEnable = true;
                    }
                    this.showCreateNewFileDialog = false;
                }
            });
        },

        langChange(type) {
            setLocalStorage("lang", type);
            this.$i18n.locale =
                getLocalStorage("lang") == "1"
                    ? "zh"
                    : getLocalStorage("lang") == "0"
                        ? "jp"
                        : "en";
        },

        onSvgContextMenuDoubleClick() {
            console.log("onSvgContextMenuDoubleClick");
            // this.isMarkupEnable = true;
            this.$refs.shapeslayout.resetToSelectMode();
        },

        /**
         * layer dialog ok
         */
        onLayerDialogOkClick(e1, e2) {
            svg_opt.setLayersData(e1);
            svg_opt.setActiveLayerIndex(e2);
            svg_opt.updateMarkupsVisiableByData();
            let tempdata = svg_opt.getDefaultLayerData();
            this.$refs.paramslayout.changeColors(tempdata.nColor);
            this.showLayerDialog = false;
        },

        onActiveLayerSelect(e2) {
            svg_opt.setActiveLayerIndex(e2);
            let tempdata = svg_opt.getDefaultLayerData();
            this.$refs.paramslayout.changeColors(tempdata.nColor);
        },

        /**
         * layer dialog ok
         */
        onLayerDialogCancelClick() {
            this.showLayerDialog = false;
        },

        /**
         * getMarkupActiveLayerIndex
         */
        getMarkupActiveLayerIndex() {
            return svg_opt.getActiveLayerIndex();
        },

        getMarkupLayersData() {
            return svg_opt.getLayersData();
        },

        getDefaultLayerData() {
            return svg_opt.getDefaultLayerData();
        },

        postGlobalMessage(data) {
            // 添加点击事件
            window.opener.postMessage(data, window.location.origin);
        },

        onTestClick() {
            svg_opt.testAddLineGroupsByParams(test_linegroup);
        },

        /**
         * 编辑模式更改
         * 0 普通标记
         * 1 球标
         * 2 球标
         */
        onOptTypeRadioChange(e) {
            this.optTypeRadio = e;
            //     console.log("onOptTypeRadioChange");
            //     console.log(e);
            if (e == 1 || e == 2) {
                svg_opt.setCanClickSelectMarkup(true);
                svg_opt.setCanEditSelectMarkup(false);
            }
            // 关闭3d球标
            this.isShow3dView = false;
        },

        updateBallMarkups(inData) {
            svg_opt.clearAllMarkups();
            svg_opt.genMarkupOrignDataFromExternalData(inData);
        },

        onTableItemSelect(inData) {
            this.$refs.shapeslayout.resetToSelectMode();
            //     svg_opt.changeGlobalState(0, -1);

            // 先把3d部分选中的数据置空 避免2d图纸没有球标
            if (this.$refs.ballRelation3dView) {
                this.$refs.ballRelation3dView.setSelect2dMarkerupData(null);
                this.$refs.ballRelation3dView.toSelect3dBallMarker(-1);


            }

            svg_opt.changeSelectStatusById(inData ? inData.posOrdr : -1, false);
        },

        onReturnBallMarkupData(inData) {
            if (this.$refs.ballRelationView) {
                this.$refs.ballRelationView.setOnAddMarkupData(inData);
            }
        },

        afterRelationViewEnter() {
            this.initLoadSvgData();
        },

        afterRelationViewLeave() {
            this.initLoadSvgData();
        },

        initLoadSvgData() {
            this.showPageLoading(true);
            setTimeout(() => {
                this.showPageLoading(false);

                svg_opt.AddSvg(
                    this.svgSourceUrl,
                    "right-CAD",
                    this.onSvgMousePosChange,
                    false,
                    0,
                    0,
                    this.drawableData.ext == "wmf" ? 1 : -1
                );
            }, 1500);
        },

        // 3d球标点击  更新图纸和表格
        // 入参3d球标的text  対应的是posorder
        on3dBallMarkerClick(inId) {
            if (this.$refs.ballRelationView)
                this.$refs.ballRelationView.toSelectTableItem(inId);

            svg_opt.changeSelectStatusById(inId, false);
        },

        // 获取图纸
        async GetMarkUpSvgApi() {
            console.log('12312312');
            // 此处不用管，ui有调整，接口有调整，导致対应不上
            let FunType = 1;
            if (this.optTypeRadio == 0) {
                FunType = 1;
            } else if (this.optTypeRadio == 3) {
                FunType = 2;
            } else if (this.optTypeRadio == 1) {
                FunType = 3;
            } else if (this.optTypeRadio == 2) {
                FunType = 4;
            }
            let data = {
                PltCode: this.optPltCode,
                DmgCode: this.optMacCode,
                FunType
            };
            GetMarkUpSvg(data).then(async (res) => {
                this.showPageLoading(false);
                svg_opt.removeSvg();
                // right-CAD


                if ((!res || res.data.code != 0) && this.optPltCode) {

                    this.svgSourceUrl = ''
                    return;
                }
                if (FunType == 1) {
                    this.getMarkUpFileId = res.data.data[0].id;
                }
                svg_opt.setSvgLineWidthRatio(1.5);
                svg_opt.setSvgBoundingBoxRatio(0, 0, 0.9);
                svg_opt.setEditDotWidthRatio(3);

                this.drawableData = res.data.data[0];
                // let tempExt = this.drawableData.ext.toLowerCase();
                let EXT = this.drawableData.ext
                if (
                    EXT == "png" ||
                    EXT == "jpg" ||
                    EXT == "gif" ||
                    EXT == "bmp" ||
                    EXT == "jpeg" ||
                    EXT == "tif" ||
                    EXT == "tiff"
                ) {
                    this.svgSourceUrl = require("@/assets/model/method-draw-image.svg");
                } else {
                    this.svgSourceUrl = res.data.data[0].path;
                }

                this.fileName = res.data.data[0].name + "." + res.data.data[0].ext;
                this.fileNameWithoutExt = res.data.data[0].name;
                this.fileDate = res.data.data[0].modifyTime;
                this.fileUrl = res.data.data[0].sourcePath;
                this.fileId = res.data.data[0].sourcePath;
                document.title = this.fileName;
                svg_opt.AddSvg(
                    this.svgSourceUrl,
                    "right-CAD",
                    this.onSvgMousePosChange,
                    false,
                    0,
                    0,
                    this.drawableData.ext == "wmf" ? 1 : -1
                );
                svg_opt.SetSvgMouseMode(0);
                svg_opt.setSelectCallBack(this.updateParamOnSelected);
                svg_opt.setOpenInputTextCallBack(this.toShowTextInputDialog);
                svg_opt.setLoadCallBack(this.onSvgLoaded);
                svg_opt.setOnAddMarkupDataFun(this.onReturnBallMarkupData);
                svg_opt.setUpdateMarkupBaseInfoCallback(
                    this.updateMarkupFileBaseData
                );
                svg_opt.setContextMenuDoubleClickFun(
                    this.onSvgContextMenuDoubleClick
                );
            });

            this.showPageLoading(true);
        }
    },
    // 创建前状态(里面是操作)
    beforeCreate() { },
    // 创建完毕状态(里面是操作)
    created() { },
    // 挂载前状态(里面是操作)
    beforeMount() { },
    // 挂载结束状态(里面是操作)
    mounted() {
        //    this.svgSourceUrl = require("@/assets/model/method-draw-image.svg");
        //    svg_opt.AddSvg(this.svgSourceUrl, "right-CAD", this.onSvgMousePosChange);
        //    return;
        let _self = this;
        this.getParamsSelect("e");
        this.optTypeRadio = Number(this.$route.query.radioType);
        this.onOptTypeRadioChange(this.optTypeRadio);
        this.optMacNumb = this.$route.query.macNumb;
        this.optMacCode = Number(this.$route.query.macCode);
        this.optPltCode = Number(this.$route.query.pltCode);

        // ??????模拟下切换操作???
        // if (this.optTypeRadio == 0) {
        //     this.optTypeRadio = 2;
        //     this.isSvgLoaded = true;
        //     setTimeout(() => {
        //         this.isSvgLoaded = false;
        //         this.optTypeRadio = 0
        //     }, 500);
        // } else if (this.optTypeRadio == 1) {
        //     this.optTypeRadio = 2;
        //     this.isSvgLoaded = true;
        //     setTimeout(() => {
        //         this.isSvgLoaded = false;
        //         this.optTypeRadio = 1
        //     }, 500);
        // }

        console.log("this.optTypeRadio ===== " + this.optTypeRadio);
        if (this.optTypeRadio == -1) {
            let data = {
                PltCode: this.optPltCode,
                DmgCode: this.optMacCode,
                FunType: 1,
                id: this.$route.query.id
            };
            getFile(data).then(async (res) => {
                this.showPageLoading(false);
                if (!res || res.data.code != 0) {
                    return;
                }
                svg_opt.setSvgLineWidthRatio(1.5);
                svg_opt.setSvgBoundingBoxRatio(0, 0, 0.9);
                svg_opt.setEditDotWidthRatio(3);

                this.drawableData = res.data.data[0];
                let tempExt = this.drawableData.ext.toLowerCase();
                let EXT = this.drawableData.ext
                if (
                    EXT == "png" ||
                    EXT == "jpg" ||
                    EXT == "gif" ||
                    EXT == "bmp" ||
                    EXT == "jpeg" ||
                    EXT == "tif" ||
                    EXT == "tiff"
                ) {
                    this.svgSourceUrl = require("@/assets/model/method-draw-image.svg");
                } else {
                    this.svgSourceUrl = res.data.data[0].path;
                }

                this.fileName = res.data.data[0].name + "." + res.data.data[0].ext;
                this.fileNameWithoutExt = res.data.data[0].name;
                this.fileDate = res.data.data[0].modifyTime;
                this.fileUrl = res.data.data[0].sourcePath;
                this.fileId = res.data.data[0].sourcePath;
                document.title = this.fileName;
                svg_opt.AddSvg(
                    this.svgSourceUrl,
                    "right-CAD",
                    this.onSvgMousePosChange,
                    false,
                    0,
                    0,
                    this.drawableData.ext == "wmf" ? 1 : -1
                );
                svg_opt.SetSvgMouseMode(0);
                svg_opt.setSelectCallBack(this.updateParamOnSelected);
                svg_opt.setOpenInputTextCallBack(this.toShowTextInputDialog);
                svg_opt.setLoadCallBack(this.onSvgLoaded);
                svg_opt.setOnAddMarkupDataFun(this.onReturnBallMarkupData);
                svg_opt.setUpdateMarkupBaseInfoCallback(
                    this.updateMarkupFileBaseData
                );
                svg_opt.setContextMenuDoubleClickFun(
                    this.onSvgContextMenuDoubleClick
                );
            });
        }


        this.showPageLoading(true);

        document.onkeydown = () => {
            let key = window.event.keyCode;
            console.log("onkeydown");
            console.log(key);
            if (key == 46 && !this.showTextInputDialog) {
                if (_self.isMarkupEnable) {
                    if (_self.selectedParams && _self.$refs.ballRelationView) {
                        console.log(_self.selectedParams);
                        _self.$refs.ballRelationView.deleteBallMarkup(
                            _self.selectedParams.posOrder,
                            _self.selectedParams.bln_dtlno
                        );
                    }

                    svg_opt.tryDeleteSelectMarkup();
                }
            }
        };

        document.onwheel = function (e) {
            console.log("onscroll");
            console.log(e);
        };

        // this.GetMarkUpSvgApi();
    },
    // 更新前状态(里面是操作)
    beforeUpdate() { },
    // 更新完成状态(里面是操作)
    updated() { },
    // 销毁前状态(里面是操作)
    beforeDestroy() { },
    // 销毁完成状态(里面是操作)
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.cadView {
    width: 100%;
    height: 100%;

    .toolbar {
        width: 100%;
        height: 80px;
        background: rgba(245, 245, 245, 1);

        .t-content {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            text-align: center;

            background: #213d49;
            box-shadow: inset 0px 1px 4px 0px rgba(0, 21, 41, 0.12);

            .l-content {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 40px;

                span {
                    font-weight: 500;
                    color: rgba(242, 244, 244, 0.9);
                    font-size: 16px;
                    margin: 0 6px;
                    font-weight: bold;
                }
            }

            .r-content {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 40px;

                .radio-lay {
                    margin: 0 20px;
                    border-radius: 2px;
                    border: 1px solid #d9d9d9;
                    background-color: #fff;
                    padding: 3px 20px;
                }

                .nowTime {
                    color: rgba(255, 255, 255, 0.65);
                    font-size: 14px;
                    margin: 0 8px;
                }

                .el-icon-full-screen {
                    font-size: 16px;
                    cursor: pointer;
                    color: rgba(255, 255, 255, 0.65);
                }
            }
        }
    }

    .content-view {
        position: relative;
        width: 100%;
        height: calc(100% - 80px);
        display: flex;
        justify-content: flex-start;

        .right-CAD {
            width: calc(100% - 48px);
            height: calc(100% - 40px);
            // min-width: 1152px;
            // min-height: 640px;
            // overflow: hidden;
            // overflow-y: auto;
        }

        .bottom-content {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 40px;
            border-top: 1px solid #b4b4b4;
            background: rgba(245, 245, 245, 1);

            .l {
                width: calc(100% - 490px);
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-right: 1px solid rgba(226, 226, 226, 1);

                span {
                    font-size: 12px;
                    margin: 16px;
                }
            }

            .X {
                width: 140px;
                height: 100%;
                display: flex;
                align-items: center;
                border-right: 1px solid rgba(226, 226, 226, 1);

                span {
                    font-size: 12px;
                    margin: 16px;
                }
            }

            .Y {
                width: 140px;
                height: 100%;
                display: flex;
                align-items: center;
                border-right: 1px solid rgba(226, 226, 226, 1);

                span {
                    font-size: 12px;
                    margin: 16px;
                }
            }

            .file-Date {
                width: 210px;
                font-size: 12px;
            }
        }

        .ballrelative-lay {
            position: absolute;
            width: 400px;
            height: calc(100% - 40px);
            right: 0px;
            overflow: hidden;

            .table-lay {
                position: absolute;
                width: 400px;
                // width: 100%;
                height: 100%;
                top: 0px;
                right: 0px;
                z-index: 5;
            }

            .scene-lay {
                position: absolute;
                width: 600px;
                height: 100%;
                top: 0px;
                right: 0px;
            }
        }
    }
}

.active {
    background: rgba(220, 220, 220, 1);
    border-radius: 4px;
    border: 1px solid rgba(189, 189, 189, 1);
}

.loading-mask {
    background: #b4b4b4;
}

.ivu-dropdown-item {
    min-width: 260px;
    height: 40px;
    text-align: left;
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
}

.ivu-dropdown-item:hover {
    background: #dedede;
}

.ivu-dropdown-item-divided {
    display: flex;
    align-items: center;
    margin-top: 0;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    border-top: 1px solid #b4b4b4;
}

.ivu-dropdown-item-divided:before {
    display: none;
}

.ivu-dropdown .ivu-select-dropdown {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.24);
    border-radius: 0px 0px 4px 4px;
}

.el-icon-caret-right {
    position: absolute;
    right: 14px;
}

pre {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

::v-deep .ivu-dropdown-item-disabled {
    color: #c5c8ce !important;
    cursor: not-allowed;
    background: #fff;
}

::v-deep .ivu-dropdown-item-disabled:hover {
    background: #fff;
}

::v-deep .el-button.is-disabled.el-button--text {
    color: #c5c8ce !important;
    cursor: not-allowed !important;
    // background: #fff;
}

.el-icon-s-home {
    color: rgba(0, 0, 0, 0.65) !important;
}

.dialog-exit {
    width: 30%;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;

    .markupbtn {
        border: 1px solid rgba(217, 217, 217, 1);
        border-radius: 4px;
        padding: 8px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 8px;
        min-width: 70px;
    }
}

::v-deep .el-dialog__header {
    // height: 40px;
    // display: flex;
    // align-items: center;
    // padding: 0 24px;
    // background: #fafafa;
}

::v-deep .el-dialog__headerbtn {
    top: 10px;
}

// el-dialog__header
::v-deep .el-dialog__title {
    // font-size: 16px;
    // font-weight: 600;
}

::v-deep .el-dialog__body {
    padding: 10px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
    transition: all 0.3s ease;
}

.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
    {
    transform: translateX(140px);
    opacity: 0;
}
</style>
